<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>用户中心-英雄联盟周边商城</title>
<link rel="stylesheet" href="../static/css/swb.css"/>
<link rel="stylesheet" href="../static/css/public.css"/>
<link rel="stylesheet" href="../static/css/UserCenter.css"/>
<style>
    #live2d-widget {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #live2dcanvas {
        border: 0 !important;
    }

    #kbn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .kbn-dhk {
        background-color: #f0e7d6;
        border: 1px solid #e6d4c1;
        border-radius: 10px;
        line-height: 50px;
        text-align: center;
        margin: 38px 0 0 10px;
    }
</style>
</head>

<body>
<header sty="hi75">
    <div class="banner cf">
        <div sty="mt17" class="logo-box ftl">
            <a sty="wi297 hi39" class="logo dpib" href="../Index/Index.html"></a>
        </div>
        <div sty="hi30 mt22" class="header-right-box ftr fdl">
            <div sty="pr20 cf">
                <a sty="pr6 lh30" href="">您好，请登录 </a>
            </div>
            <div sty="pr28 cf">
                <a href="">
                    <i sty="wi28 hi25 mt3 mr4" class="shop ftl"></i>
                    <span sty="lh30 pr6" class="ftl">购物车</span>
                    <span sty="wi20 hi20 lh20 mt7 " class="shop-num ftl tac">0</span>
                </a>
            </div>
            <div sty="pr28 cf">
                <i sty="wi24 hi26 mt3 mr4" class="service ftl"></i>
                <span sty="lh30" class="ftl">客服咨询</span>
            </div>
            <div sty="cf">
                <i sty="wi20 hi20 mt5 mr4" class="qr-code ftl"></i>
                <span sty="lh30" class="ftl">微信商城</span>
            </div>
        </div>
    </div>
</header>
<div class="main  bg-index">
    <div class="banner">
        <nav class="cf">
            <ul class="ftl">
                <li><a href="{{ url("index:index") }}">商城首页</a></li>
            </ul>
            <div sty="mt15 mr34" class="ftr pr cf">
                <input sty="wi239 hi30 fs14" class="ftl" type="text" onfocus="$('nav .default').hide()"
                       onblur="if (this.value == '') { $('nav .default').show() } else { $('nav .default').hide() }"/>
                <a sty="tp9 lt10 fs14" class="default pa" href="">阿狸</a>
                <div sty="wi45 hi30" class="search-btn ftl">
                    <a href="">
                        <i sty="wi21 hi21 mt5 ml12" class="dpib"></i>
                    </a>
                </div>
            </div>
        </nav>
        <div class="streamer">
            <img src="./images/mem_top.jpg" alt=""/>
        </div>
        <div class="main-content fdl" style=" min-height: 500px;">
            <div sty="wi180 pt10" class="main-content-left" style="height: 100%; background-color: #f6f6f6;">
                <ul>
                    <li>
                        <a href="{{ url('users:Shopping') }}">我的购物车</a>
                    </li>
                    <li>
                        <a href="{{ url('users:user_order') }}">我的订单</a>
                    </li>
                    <li>
                        <a href="{{ url('users:user_collect') }}">商品收藏</a>
                    </li>
                     <li class="active">
                        <a href="{{ url('areas:user_address') }}">收货地址</a>
                    </li>
                    <li>
                        <a href="{{ url('users:user_data') }}">个人资料</a>
                    </li>
                   </ul>
            </div>
            <div class="main-content-right-all">
                <div class="main-content-right"></div>
<form method="post">
                <div id="order" sty="wi1020 pl40 pt20" class="main-content-right bsbb active">
                    <div sty="mb20" class="main-content-right-top">
                        <table class="tac">
                            <tr height="38" style="background-color: #f0f0f0;">
                                <th width="130">姓名</th>
                                <th width="400">地址</th>
                                <th width="150">联系电话</th>
                                <th width="130">是否默认</th>
                                <th width="130">操作</th>
                            </tr>
                            <tr style="border-bottom: 1px solid #e1e1e1;">
                                <td height="53">
                                    {{ address.name }}
                                </td>
                                <td>
                                    <span>{{ s_province }}|{{ s_city }}|{{ address }}</span><br/>
                                </td>
                                <td><span>{{ phone }}</span></td>
                                <td class="fw7">否</td>
                                <td><a class="order-details" href="">修改</a>
                                    <a class="order-details" href="">删除</a></td>
                            </tr>
                        </table>
                    </div>
                    <div sty="pb100" class="main-content-right-content">
                        <table>
                            <tr height="38">
                                <th sty="ti10" width="200">新增收货地址</th>
                                <th width="740"></th>
                            </tr>
                            <tr height="50">
                                <td class="tar">
                                    <span style="color: red;">*</span> 收货人：
                                </td>
                                <td>
                                    <input name="name" type="text" placeholder="请输入收货人姓名">
                                </td>
                            </tr>
                            <tr height="50">
                                <td class="tar">
                                    <span style="color: red;">*</span> 选择地区：
                                </td>
                                <td>
                                    <div class="select">
                                        <span class="select_adderss"><label> 省份 </label>
                                            <select id="s_province" name="s_province" class="prov"></select>
                                         </span>
                                        <span class="select_adderss"><label> 市/县 </label>
                                            <select id="s_city" name="s_city" class="city"></select>
                                        </span>
                                        <span class="select_adderss"><label> 区/县 </label>
                                            <select id="s_county" name="s_county" class="county"></select>
                                        </span>
                                        <i>*</i>
                                    </div>
                                </td>
                            </tr>
                            <tr height="50">
                                <td class="tar">
                                    <span style="color: red;">*</span> 详细地址：
                                </td>
                                <td>
                                    <input name="address" type="text" placeholder="请输入详细地址"><span
                                        style="color: #9b9b9d;">（请填写详细的路名或街道地址，确保准确送达）</span>
                                </td>
                            </tr>
                            <tr height="50">
                                <td class="tar">
                                    <span style="color: red;">*</span> 手机：
                                </td>
                                <td>
                                    <input name="phone" type="text" placeholder="请输入手机号">
                                </td>
                            </tr>
                            <tr height="50">
                                <td class="tar">
                                    <span style="color: red;">*</span> 邮政编码：
                                </td>
                                <td>
                                    <input name="email_number" type="text" placeholder="请输入邮政编码">
                                </td>
                            </tr>
                            <tr height="50">
                                <td class="tar">
                                    <span style="color: red;">*</span> 默认收货：
                                </td>
                                <td>
                                    <select name="default" id="">
                                        <option value="1">否</option>
                                        <option value="2">是</option>
                                    </select>
                                </td>
                            </tr>
                            <tr height="85">
                                <td class="tar">
                                </td>
                                <td>
                                    <input sty="wi120 hi34 lh34 fs16" class="dpib tac cp" type="button.3..."
                                           style="background-color:#ed3029; color:#fff;" value="保存">
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
    </form>
            </div>
        </div>

        <footer>
            <div sty="pt20 pb20" class="guarantee banner">
                <ul class="flex">
                    <li>
                        <i class="sales-return"></i>
                        <span>7天无理由退换货</span>
                    </li>
                    <li>
                        <i class="quality-goods"></i>
                        <span>100%官方正品</span>
                    </li>
                    <li>
                        <i class="pinkage"></i>
                        <span>全场每单满199元包邮</span>
                    </li>
                </ul>
            </div>
            <div class="issue">
                <div class="banner">
                    <ul class="flex tac">
                        <li>
                            <dl>
                                <dt>购物指南</dt>
                                <dd>帐号注册与登录</dd>
                                <dd>购买流程介绍</dd>
                                <dd>支付方式</dd>
                                <dd>常见问题</dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt>配送服务</dt>
                                <dd>全场满199元免运费</dd>
                                <dd>配送范围及运费</dd>
                                <dd>配送进度查询</dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt>售后服务</dt>
                                <dd>7天无理由退换货</dd>
                                <dd>退换货流程</dd>
                                <dd>商品送错的处理方案</dd>
                                <dd>售后服务及投诉</dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt>服务中心</dt>
                                <dd>售前咨询 售后咨询</dd>
                                <dd>客服热线：0755-25727866</dd>
                                <dd>售后：service@lolriotmall.qq.com</dd>
                            </dl>
                        </li>
                    </ul>
                </div>
            </div>
            <div sty="lh40" class="copy tac">技术支持：全栈12 师文博</div>
        </footer>
    </div>
</div>
</body>
<script src="../static/js/jquery.js"></script>
<script src="../static/js/swb.js"></script>
<script src="../static/js/UserCenter.js"></script>
<script>
    {#debugger;#}
    loadProv();//初始化

    //当select标签内容发生改变是触发事件
    $(".prov").change(function () {
        loadCity();
    });
    $(".city").change(function () {
        loadCounty();
    });

    //加载省份
    function loadProv() {
        var prov_id = '';
        $.ajax({
            type: "get",
            url: "{{ url('areas:areas') }}",
            data: {
                prov_id: prov_id
                {#csrfmiddlewaretoken: $('[name="csrfmiddlewaretoken"]').val()#}
            },
            dataType: "json",
            {#async: false, //同步#}
            success: function (result) {

                var provlist = result.province_list;

                console.log('123123' + provlist);
                console.log('123123456456');
                {#console.log('123123'+citylist);#}
                var str = '';
                for (var i = 0; i < provlist.length; i++) {
                    str += '<option value=' + provlist[i].id + '>' + provlist[i].name + '</option>'
                }
                $(".prov").html(str);
                loadCity(); //加载城市
            },
            error: function () {
                console.log("获取省份失败");
            }
        });
    }

    function loadCity() {
        var prov_id = $(".prov").find("option:selected").val();
        $.ajax({
            type: "get",
            url: "{{ url('areas:areas') }}",
            data: {
                prov_id: prov_id,
                {#csrfmiddlewaretoken: $('[name="csrfmiddlewaretoken"]').val()#}
            },
            dataType: "json",
            {#async: true,#}
            success: function (result) {
                var citylist = result.sub_data.subs;
                console.log(citylist);
                var str = ''
                for (var i = 0; i < citylist.length; i++) {
                    str += '<option value=' + citylist[i].id + '>' + citylist[i].name + '</option>'
                }
                $(".city").html(str);
                loadCounty();

            },
            error: function () {
                console.log("获取城市失败");
            }
        });
    }

    //加载各区县
    function loadCounty() {
        var prov_id = $(".prov").find("option:selected").val();
        var city_id = $(".city").find("option:selected").val();
        $.ajax({
            type: "get",
            url: "{{ url('areas:areas') }}",
            {#async: true,#}
            data: {
                prov_id: city_id,
                {#city_id: city_id,#}
                {#csrfmiddlewaretoken: $('[name="csrfmiddlewaretoken"]').val()#}
            },
            dataType: "json",
            success: function (result) {
                var countylist = result.sub_data.subs;
                console.log(countylist);
                var str = '';
                for (var i = 0; i < countylist.length; i++) {
                    str += "<option value=" + countylist[i].id + ">" + countylist[i].name + '</option>'
                }
                $(".county").html(str);
            },
            error: function () {
                console.log("获取区县失败");
            }
        });
    }
</script>
<script
        type="text/javascript"
        charset="utf-8"
        src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.0.min.js"
></script>
<script
        type="text/javascript"
        charset="utf-8"
        src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.min.js"
></script>
<script type="text/javascript">
    L2Dwidget.init({
        display: {
            superSample: 2,
            width: 200,
            height: 400,
            position: "right",
            hOffset: 0,
            vOffset: 0
        }
    });
</script>

</html>